<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

</head>
<body>
<table width="100%">
    <tr>
        <td width="33%">
            <div id="chart1" style="width: 100%;height:300px;"></div>
        </td>
        <td width="33%">
            <div id="chart2" style="width: 100%;height:300px;"></div>
        </td>
    </tr>
    <tr>
        <td width="33%">
            <div id="chart3" style="width: 92%;height:300px;"></div>
        </td>

    </tr>
</table>
</body>
<script type="text/javascript" src="../js/echarts.min.js"></script>
<script>
    var chart1 = echarts.init(document.getElementById('chart1'));
    var option1 = {
        title: {
            text: "用户与视频数量"
        },
        xAxis: {
            type: 'category',
            data: ['用户数', '视频数']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [71, 35],
            type: 'bar'
        }]
    }
    chart1.setOption(option1);
</script>

<script>

    var chartDom = document.getElementById('chart2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: "用户数量近7年增长图"
        },
        xAxis: {
            type: 'category',
            data: ['2016', '2017', '2018', '2019', '2020', '2021', '2022']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [10, 20, 30, 34, 38, 45, 71],
                type: 'line',
                smooth: true
            }
        ]
    };

    option && myChart.setOption(option);
</script>
<script>

    var chartDom = document.getElementById('chart3');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: "视频数量近7年增长图"
        },
        xAxis: {
            type: 'category',
            data: ['2016', '2017', '2018', '2019', '2020', '2021', '2022']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [3, 5, 10, 16, 20, 24, 35],
                type: 'line',
                smooth: true
            }
        ]
    };

    option && myChart.setOption(option);
</script>
</html>
